<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Drag and drop</title>

<style>
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.column {
	height: 150px;
	width: 150px;
	float: left;
	border: 2px solid #666666;
	background-color: #ccc;
	margin-right: 5px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 3px #000;
	box-shadow: inset 0 0 3px #000;
	text-align: center;
	cursor: move;
}

.column header {
	color: #fff;
	text-shadow: #000 0 1px;
	box-shadow: 5px;
	padding: 5px;
	background: -moz-linear-gradient(left center, rgb(0, 0, 0),
		rgb(79, 79, 79), rgb(21, 21, 21) );
	background: -webkit-gradient(linear, left top, right top, color-stop(0, rgb(0, 0, 0)
		), color-stop(0.50, rgb(79, 79, 79) ), color-stop(1, rgb(21, 21, 21) )
		);
	border-bottom: 1px solid #ddd;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
}
</style>
<script type="text/javascript">
	window.onload = function() {
		columns = document.getElementById("columns");
		columns.style.backgroundcolor = "black"
	}
</script>
</head>
<body>
	<div id="columns">
		<div class="column" draggable="true">
			<header>A</header>
		</div>
		<div class="column" draggable="true">
			<header>B</header>
		</div>
		<div class="column" draggable="true">
			<header>C</header>
		</div>
	</div>

	<script type="text/javascript">
		function handleDragStart(e) {
			this.style.opacity = '0.4'; // this / e.target is the source node.
		}

		var cols = document.querySelectorAll('#columns .column');
		[].forEach.call(cols, function(col) {
			col.addEventListener('dragstart', handleDragStart, false);
		});
	</script>
</body>
</html>